<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header{
            width: 1005px;
            height: 131px;
            margin: 0 auto;
            padding-top: 15px;
        }
        .logo>a{
            text-decoration: none;
            float: left;
        }
        .logo img{
            width: 328px;
            height: 100px;
            vertical-align: middle;
            border: 0;
        }
        .search{
            width: 223px;
            height: 85px;
            float: right;
            padding-top: 15px;
        }
        .search_img{
            position: relative;
        }
        .sy_search{
            width: 153px;
            height: 28px;
            margin-top: 20px;
            background: url(images/search_img1.png);
            border: none;
            border-radius: 30px;
            padding-left: 65px;
            line-height: 30px;
            color: #999;
            font-size: 12px;

        }
        .sy_btn{
            width: 28px;
            height: 28px;
            background: url(images/sea_btn.png);
            position: absolute;
            top: 21px;
            right: 12px;
            border: 0;
        }
        .search_img select{
            position: absolute;
            top: 25px;
            border: none;
            left: 10px;
            color: #999;
            font-size: 12px;
        }
        .nav{
            background: #004d2b;
            height: 50px;
            position: relative;
        }
        .nav_top{
            height: 50px;
            margin: 0 auto;
            padding: 0;
        }
        .nav_top ul{
            list-style-type: none;
        }
        .nav_top li{
            float: left;
        }
        .nav_top li>a{
            display: block;
            line-height: 49px;
            text-decoration: none;
            color: white;
            margin: 0;
            font-size: 16px;
            padding: 0 38px;
        }
        .banner{
            width: 1600px;
            margin: 0 auto;

        }
        .b_img{
            display: inline;
            width: 1600px;
            height: 345px;
            padding: 0;
        }
        .banner_b{
            width: 1600px;
            height: 23px;
            background-color: #004d2b;
        }
        .pro_con{
            width:1025px;
            height: 1380px;
            margin: 40px auto;

            position: relative;
        }
        .pro_con_left{
            width: 212px;
            height: 386px;
            margin: 0px;
            padding: 0px;


        }
        .f-l{
            float: left;

        }
        .left_nav_h{
            width: 192px;
            height: 70px;
            background-color: #004d2b;
            color: #fff;
            padding: 30px 0 0 20px;
            font-weight: bold;
            overflow: hidden;

        }
        .left_nav_con{
          background-color: #e6e6e6;
            padding: 20px 0;
            width: 212px;
            height: 32px;
        }

        .left_brands{
          width:212px;
            height: 189px;
            margin-top: 25px;
        }
        .pro_con_left>.left_nav_h>span{
            font-size: 14px;
            font-family: "Arial";
        }
        .pro_con_left>.left_nav_h>p{
            font-size: 20px;
            line-height: 25px;
            width: 190px;
            overflow: hidden;
        }
.left_nav_con>ul>li>p{
    color: #004d2b;
    line-height: 30px;
    display: block;
    border-bottom: 1px solid #d9d9d9;
    width: 155px;
    font-weight: bold;
    overflow: hidden;
}
        .left_brands>h3{
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            font-size: 16px;
            color: #004d2b;
            line-height: 35px;
            border-bottom: 1px dashed #004d2b;
            margin-bottom: 17px;
            width: 212px;

            padding: 0;
        }
        .left_brand_con{
            position: relative;
            display: block;
        }
      .left_brand_con a{
            display: inline-block;
            width: 68px;
            height: 68px;
            text-align: center;
            margin: 0;
            padding: 0;
            float: left;
        }
        .left_brands .left_brand_con img{
            width: 68px;
            height: 68px;

        }

        .pro_con_right{
            width: 745px;
            height: 1384px;

        }
        .f-r{
            float: right;
        }
        .pro_con_right>.pro_con_r_title{
            border-bottom: 1px solid #d9d9d9;
            font-size: 16px;
            font-weight: bold;
            color: #004d2b;
            width: 736px;
            height: 16px;
            padding-bottom:10px ;
          overflow: hidden;
        }
        .contact_wrap{
            width: 745px;
            height: 1249px;
            margin: 50px 0;
        }
        .contact_con{
            border:1px solid #ddd;
            padding: 40px 040px 35px;
            width: 706px;
            height: 96px;
            padding: 40px 0 40px 35px;
        }
        .contact_con>P{
            font-size: 14px;
            line-height: 25px;
            display: block;
            margin: 0;padding: 0;
        }
        .contact_hotline{
            width: 376px;
            height: 90px;
            padding: 15px 0 0 90px;
            margin: 10px 0;
            color: #ffffff;
            background: url("images/phone.png") no-repeat 30px center #666;
        }
        .contact_hotline>b{
            font-family: "Impact";
            font-size: 40px;
        }


        .Message{
            width: 745px;
            height: 550px;
        }
        .message_title{
            width: 745px;
            height: 56px;
            padding: 30px 0;
            border-bottom:1px solid #dddddd;

        }
        .message_title>p>b{
            font-size: 26px;
            color: #000;
        }
        .message_title>p>span{
            font-size: 18px;
            color: #066801;
            margin-left: 17px;
        }
        .message_title>p{
            color: #343434;
            font-size: 14px;
            margin-top: 6px;

        }
        .Message>.message_title>p>i{
            color: red;
        }
        .liuyancon{
            width: 745px;
            height: 422px;
            padding-top: 8px;
            overflow: hidden;
            font-size: 14px;
            color: #343434;
        }
        .l1{
            width: 458px;
            height: 38px;
            line-height: 30px;
        }
        .l1>i{
            color: red;
        }

        .ltext1{
            width: 295px;
            height: 34px;
            border: 1px solid #cccccc;
            border-radius: 2px;
        }
        .l2{
            font-weight: bold;
            line-height: 30px;
            height: 38px;
            margin-top: 14px;
            margin-bottom: 3px;
        }
        .l3{
            width: 658px;
            height: 80px;
            line-height: 30px;
            vertical-align: bottom;
        }
        .ltext3{
            width: 91px;
            height: 33px;
            border: 1px solid #cccccc;
            margin-right: 10px;
        }
        .l3>em{
            font-size: 12px;
            font-style: normal;
            color: #666666;
            margin-left: 10px;
        }

        .l3>b>i{
            color: red;
        }
        .l3>img{
            vertical-align: middle;
        }
        .footer{

            height: 175px;
            background: #666666;
            position: absolute;
            width: 100%;
        }
        .footer_wrap{
            width: 1005px;
            height: 40px;
            margin: 0 auto;
            line-height: 40px;
        }
        .footer_wrap>p{
            color: #d4d4d4;
            min-width: 175px;
        }
        .f-l{
            float: left;
        }
        .footer_wrap>p>a{
            color: #bbcc04;
            margin-left: 15px;
        }

        .footer_wrap>p>a>img{
            width: 24px;
            height: 24px;
        }
        .f-r>img{
            vertical-align: middle;
        }
        .footer_wrap>.f-r{
            float: right;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<!--头部-->

    <header>
        <!--左侧logo-->
        <div class="logo">
            <a href="">
                <img src="images/logo.jpg" alt="">
            </a>
        </div>
        <!--右侧搜索栏-->
        <div class="search">
            <div class="search_img">
                <input type="text" class="sy_search" value="请输入搜索关键字" placeholder="请输入搜索关键字">
                <input type="submit" class="sy_btn" value="">
                <select name="" id="select">
                    <option value="新闻">新闻</option>
                    <option value="产品">产品</option>
                </select>
                <div class="search_xiala"></div>
            </div>
        </div>
    </header>
    <!--导航条开始-->
    <div class="nav">
        <div class="nav_top container">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">犬粮</a></li>
                <li><a href="">猫粮</a></li>
                <li><a href="">企业简介</a></li>
                <li><a href="">购物</a></li>
                <li><a href="">防伪查询</a></li>
                <li><a href="">企业招聘</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
    </div>
    <!--导航条结束-->
    <!--轮播图开始-->
    <div class="banner">
        <img class="b_img container" src="images/jinmao.jpg" alt="">
    </div>
    <div class="banner_b container"></div>
    <!--轮播图结束-->

<div class="pro_con clearfix">
<div class="pro_con_left f-l">
    <div class="left_nav">
<div class="left_nav_h">
    <span>Contact US</span>
    <p>随时联系我们</p>
</div>
<div class="left_nav_con about">
    <ul>
        <li>
         <p>期待您的反馈</p>
        </li>
    </ul>
</div>
<div class="left_brands">
    <h3>其他品牌</h3>
            <div class="left_brand_con">
        <a href=""><img src="images/a.png" alt=""></a>
        <a href=""><img src="images/b.jpg" alt=""></a>
        <a href=""><img src="images/c.jpg" alt=""></a>
        <a href=""><img src="images/d.jpg" alt=""></a>
        <a href=""><img src="images/e.jpg" alt=""></a>
        <a href=""><img src="images/f.jpg" alt=""></a>


    </div>
</div>
    </div>
</div>
<div class="pro_con_right f-r">
    <div class="pro_con_r_title">
        <span>期待</span>
        "您的反馈"
    </div>
    <div class="contact_wrap">
        <div class="contact_title">
            <img src="images/green.jpg" alt="">
        </div>
        <div class="contact_con">
            <p>地址：************************************</p>
            <p>邮编：******</p>
            <p>电话：*************</p>
            <p>服务热线：*************</p>
        </div>
        <div class="contact_hotline">
            <p>************</p>
            <b>*********</b>
        </div>
       <div class="ditu">
           <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
           <html xmlns="http://www.w3.org/1999/xhtml">
           <head>
               <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
               <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
               <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
               <title>百度地图API自定义地图</title>
               <!--引用百度地图API-->
               <style type="text/css">
                   html,body{margin:0;padding:0;}
                   .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
                   .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
               </style>
               <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
           </head>

           <body>
           <!--百度地图容器-->
           <div style="width:500px;height:250px;border:#ccc solid 1px;" id="dituContent"></div>
           </body>
           <script type="text/javascript">
               //创建和初始化地图函数：
               function initMap(){
                   createMap();//创建地图
                   setMapEvent();//设置地图事件
                   addMapControl();//向地图添加控件
               }

               //创建地图函数：
               function createMap(){
                   var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
                   var point = new BMap.Point(116.329185,39.990809);//定义一个中心点坐标
                   map.centerAndZoom(point,13);//设定地图的中心点和坐标并将地图显示在地图容器中
                   window.map = map;//将map变量存储在全局
               }

               //地图事件设置函数：
               function setMapEvent(){
                   map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                   map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                   map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                   map.enableKeyboard();//启用键盘上下左右键移动地图
               }

               //地图控件添加函数：
               function addMapControl(){
                   //向地图中添加缩放控件
                   var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
                   map.addControl(ctrl_nav);
                   //向地图中添加缩略图控件
                   var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
                   map.addControl(ctrl_ove);
                   //向地图中添加比例尺控件
                   var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
                   map.addControl(ctrl_sca);
               }


               initMap();//创建和初始化地图
           </script>
           </html>
       </div>
        <div class="Message">
            <div class="message_title">
                <p>
                    <b>Message</b>
                    <span>在线留言</span>
                </p>
                <p>
                    "您好，以下打"
                    <i>*</i>
                    "号的选项为必填选项。若您有详细产品的需求请仔细填写，我们会尽快的与您取得练习！"
                </p>
            </div>
            <div class="liuyancon">
                <table border="0" cellpadding="0" cellspacing="0">
                    <tbody>
                    <tr>
                        <td class="l1" style="font-weight: bold">
                            <i>*</i>
                            您的姓名：
                        </td><td class="l1" style="font-weight: bold">
                            <i>*</i>
                            您的地址：
                        </td>
                    </tr>
                    <tr>
                        <td class="l1">
                            <input class="ltext1" id="FullName" maxlength="50" minlength="1" em="您的姓名不能为空！" tabindex="1" type="text">
                        </td>
                        <td class="l1">
                            <input type="text" class="ltext1" id="Address" maxlength="100" tabindex="2">
                        </td>
                    </tr>
                    <tr>
                        <td class="l1" style="font-weight: bold">
                            <i>*</i>
                            您的电话：
                        </td><td class="l1" style="font-weight: bold">
                            <i>*</i>
                            您的邮箱：
                        </td>
                    </tr>
                    <tr>
                        <td class="l1">
                            <input class="ltext1" id="tel" maxlength="20" minlength="1" em="您的电话不能为空！" tabindex="1" type="text">
                        </td>
                        <td class="l1">
                            <input type="text" class="ltext1" id="Email" maxlength="70" tabindex="4">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="l2">有什么可以帮助您的？</td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <textarea  class="ltext2" name="" id="Content" cols="80" rows="10"></textarea>
                        </td>
                    </tr>
                  <!--  <td class="l3" valign="middle">
                        <b>
                            <i>*</i>
                            请输入验证码：
                        </b>
                        <input class="ltext3" em="验证码不能为空" tabindex="6" minlength="1" maxlength="4" id="ImgCode" type="text">
                        <img onclick="$('#ImageKey').attr('src', '/AjaxFile/Code.aspx?dump=' + Math.random());" id="ImageKey" src="images/Code.gif" height="35" width="90">
                        <em style="cursor: pointer;">看不清换一张</em>
                    </td>-->
                    <td valign="bottom" style="text-align:right">
                        <input value="确认提交" id="tijiao" class="liu_button1" type="button"><input value="重      置" class="liu_button2" id="chongzhi" type="button">
                    </td>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
<div class="footer" style="display: block">
    <div class="footer_wrap" style="display: block">
<p class="f-l">
    版权所有©上海耐威克宠物用品有限公司    沪ICP备16047259号-1　地址：上海市闵行区浦江镇北江榉路耐威克宠物城堡  201114&nbsp;
        <a href="" style="text-decoration: none">网站地图</a>
</p>

    <div STYLE="width: 300px;margin: 0 auto;padding: 20px 0">
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011202007318" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;">
            <p style="float:left;height:20px;line-height:20px;margin:0px 0px 0px 5px;color:#939393;">
                <img src="images/plice.png" alt="">沪公网安备 31011202007318号
            </p>
        </a>
    </div>
        <p class="f-r" style="display: block">
            <a href="" style="text-decoration: none">友情连接</a>
            <a href=""><img src="images/mao.png" alt="" style="width: 24px;height: 24px"></a>
            <a href=""><img src="images/dog.jpg" alt="" style="width: 30px;height: 19px"></a>
            <a href=""><img src="images/wiebo.jpg" alt="" style="width: 30px;height: 24px"></a>
        </p>
    </div>
</div>
</body>
</html>